<!--
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
OCR front-end client interface.
Created on Mon Jul 10 11:00:00 2017
Author: Prasun Roy | CVPRU-ISICAL (http://www.isical.ac.in/~cvpr)
GitHub: https://github.com/prasunroy/ocr
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-->


<!DOCTYPE html>
<html>

  <!-- head -->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>OCR</title>

    <link rel="icon" type="image/x-icon" href="static/images/favicon.ico">

    <!-- stylesheets -->
    <link rel="stylesheet" type="text/css" href="static/stylesheets/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/stylesheets/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="static/stylesheets/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="static/stylesheets/styles.css">
  </head>

  <!-- body -->
  <body class="no-scroll">
    <!-- loading screen -->
    <div class="loader">
      <div class="spinner"></div>
    </div>

    <!-- navigation bar -->
    <nav class="navbar navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="">OCR</a>
          <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar-link">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-link">
          <ul class="nav navbar-nav navbar-left">
            <li class="active"><a href="">HOME</a></li>
            <li><a href="">RESEARCH</a></li>
            <li><a href="">PEOPLE</a></li>
            <li><a href="https://github.com/prasunroy/ocr" target="_blank">GITHUB</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- jumbotron -->
    <div class="jumbotron hidden-xs hidden-sm">
      <div class="container">
        <h1><b>OCR</b></h1>
        <p>An Optical Character Recognition System</p>
      </div>
    </div>

    <!-- image browser and uploader -->
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <div class="panel panel-default">
            <div class="panel-heading hidden-xs">
              <b>Upload an image or Write something</b>
            </div>
            <div class="panel-body">
              <div class="input-group">
                <input type="text" class="form-control" id="fileinfo" disabled="disabled"/>
                <span class="input-group-btn">
                  <label class="btn btn-default">Browse<input type="file" class="file" id="browse" accept="image/*" hidden="hidden"/></label>
                  <button type="button" class="btn btn-primary no-outline" id="upload">Upload</button>
                  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></button>
                  <ul class="dropdown-menu" id="menu">
                    <li class="dropdown-header"><i class="fa fa-television menu-icon" aria-hidden="true"></i><b>Display Options</b></li>
                    <li><a class="view-option selected" id="embedded-view"><i class="fa fa-check menu-icon" aria-hidden="true"></i>Embedded View</a></li>
                    <li><a class="view-option" id="floating-view"><i class="fa fa-check menu-icon" aria-hidden="true"></i>Floating View</a></li>
                    
                    <li class="divider"></li>

                    <li class="dropdown-header"><i class="fa fa-object-group menu-icon" aria-hidden="true"></i><b>Segmentation Modes</b></li>
                    <li><a class="segm-option selected" id="contour"><i class="fa fa-check menu-icon" aria-hidden="true"></i>Contour Based</a></li>
                    <li><a class="segm-option" id="histogram"><i class="fa fa-check menu-icon" aria-hidden="true"></i>Histogram Based</a></li>

                    <li class="divider"></li>
                    
                    <li class="dropdown-header"><i class="fa fa-cogs menu-icon" aria-hidden="true"></i><b>Recognition Engines</b></li>
                    <li><a class="re-option selected" id="en-numbers"><i class="fa fa-check menu-icon" aria-hidden="true"></i>English Numbers</a></li>
                    <li><a class="re-option" id="en-letters"><i class="fa fa-check menu-icon" aria-hidden="true"></i>English Letters</a></li>
                    <li><a class="re-option" id="bn-numbers"><i class="fa fa-check menu-icon" aria-hidden="true"></i>Bengali Numbers</a></li>
                    <li><a class="re-option" id="bn-letters"><i class="fa fa-check menu-icon" aria-hidden="true"></i>Bengali Letters</a></li>
                    <li><a class="re-option" id="dv-numbers"><i class="fa fa-check menu-icon" aria-hidden="true"></i>Devanagari Numbers</a></li>
                    <li><a class="re-option" id="dv-letters"><i class="fa fa-check menu-icon" aria-hidden="true"></i>Devanagari Letters</a></li>
                  </ul>
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- canvas -->
        <div class="col-xs-12">
          <canvas class="box-shadow"></canvas>
        </div>

        <!-- canvas controllers -->
        <div class="col-xs-6">
          <button type="button" class="btn btn-danger btn-custom no-outline" id="clear">CLEAR</button>
        </div>
        <div class="col-xs-6">
          <button type="button" class="btn btn-success btn-custom no-outline" id="recognize">RECOGNIZE</button>
        </div>

        <!-- output renderers -->
        <!-- page renderer -->
        <div class="col-xs-12">
          <img id="view" hidden="hidden"/>
          <div class="anim" id="anim" align="center" hidden="hidden"><i class="fa fa-cog fa-spin fa-5x fa-fw" aria-hidden="true"></i></div>
          <textarea class="no-outline" id="text" readonly="readonly" hidden="hidden"></textarea>
        </div>

        <!-- modal renderer -->
        <div class="modal fade" id="modal">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close no-outline" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                <h4 class="modal-title"></h4>
              </div>
              <div class="modal-body">
                <img id="modal-view" hidden="hidden"/>
                <div class="anim" id="modal-anim" align="center" hidden="hidden"><i class="fa fa-cog fa-spin fa-5x fa-fw" aria-hidden="true"></i></div>
                <textarea class="no-outline" id="modal-text" readonly="readonly" hidden="hidden"></textarea>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-danger no-outline" data-dismiss="modal">CLOSE</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- footer -->
    <footer class="footer">
      <div class="container">
        <div class="hidden-xs">
          Copyright <span><i class="fa fa-copyright" aria-hidden="true"></i></span> 2018 Computer Vision and Pattern Recognition Unit Indian Statistical Institute Kolkata
        </div>
        <div class="hidden-sm hidden-md hidden-lg">
          Copyright <span><i class="fa fa-copyright" aria-hidden="true"></i></span> 2018 CVPR Unit ISI Kolkata
        </div>
      </div>
    </footer>

    <!-- javascripts -->
    <script type="text/javascript" src="static/javascripts/jquery.min.js"></script>
    <script type="text/javascript" src="static/javascripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="static/javascripts/script.js"></script>
  </body>

</html>
